<template>
  <div class="mobelIndex">
    <div class="box">
      <div class="tableItem" v-for="(item,index) in tableList">
        <div class="title">{{ item.user }}</div>
        <!-- <div> -->
        <!-- 每个日期 -->
        <div  v-if="queryParams.type==1" v-for="label in item.data">
          <div class="item" v-for="innerLaber in label.data">
            <div class="DateTitle">{{ setTime(innerLaber.date) }}</div>
            <div v-for="inner in innerLaber.question">
              <div class="questImg">

                <el-image
                  style="width: 100%; min-height: fit-content"
                  :src="inner.pictureAddress"
                  :preview-src-list="[inner.pictureAddress]"
                  fit="contain"/>
              </div>
              <!--              代数计算化简-->
              <div class="item1" v-if="inner.calculateMap">
                <!--                <div class="innerTitle">代数计算化简/几何转化处理</div>-->
                <el-divider content-position="left">代数计算化简/几何转化处理</el-divider>
                <div class="item2" v-for="innerCalculate in inner.calculateMap.label">
                  <div>{{ innerCalculate.name }}
                    <i
                      class="el-icon-check"
                      v-if="
                          innerCalculate.isNo == 'yes'
                        "
                    ></i>
                    <i v-else class="el-icon-close"></i>

                  </div>

                </div>
              </div>
              <!--              代数计算化简-->
              <!--              思路预判与条件翻译-->
              <div class="item1" v-if="inner.calculateMap">
                <!--                <div class="innerTitle">思路预判与条件翻译</div>-->
                <el-divider content-position="left">思路预判与条件翻译</el-divider>
                <div class="item2" v-for="innerCalculate in inner.conditionMap.label">
                  <div>{{ innerCalculate.name }}
                    <i
                      class="el-icon-check"
                      v-if="
                          innerCalculate.isNo == 'yes'
                        "
                    ></i>
                    <i v-else class="el-icon-close"></i>
                  </div>

                </div>
              </div>
              <!--              思路预判与条件翻译-->
              <!--              题型辨识-->
              <div class="item1" v-if="inner.calculateMap">
                <el-divider content-position="left">题型辨识</el-divider>
                <div class="item2" v-for="innerCalculate in inner.questionTypesMap.label">
                  <div>{{ innerCalculate.name }}
                    <i
                      class="el-icon-check"
                      v-if="
                          innerCalculate.isNo == 'yes'
                        "
                    ></i>
                    <i v-else class="el-icon-close"></i>
                  </div>

                </div>
              </div>
              <!--              题型辨识-->


            </div>

            <!-- 标签正确率 -->
            <div v-for="bottomLabel in innerLaber.information" class="labelSum">
              <div>{{ bottomLabel.key }}</div>
              <div>
                <div>
                  <span>出现次数:</span>
                  <span>{{ bottomLabel.sum }}</span>
                </div>
                <div>
                  <span>正确率:</span>
                  <span style="color:green;">{{ bottomLabel.exactNumber }}</span>
                </div>
                <div>
                  <span>错误率:</span>
                  <span style="color: red">{{ bottomLabel.errorNumber }}</span>
                </div>
              </div>


            </div>


          </div>
        </div>
        <!-- 每个日期 -->

        <!-- 每个周期 -->
        <div v-if="queryParams.type==2" v-for="labelOrder in item.data">
            <div class="DateTitle">第{{ labelOrder.order }}周期</div>
            <div v-for="inner in labelOrder.question">
              <div class="questImg">

                <el-image
                  style="width: 100%; min-height: fit-content"
                  :src="inner.pictureAddress"
                  :preview-src-list="[inner.pictureAddress]"
                  fit="contain"/>
              </div>
              <!--              代数计算化简-->
              <div class="item1" v-if="inner.calculateMap">
                <!--                <div class="innerTitle">代数计算化简/几何转化处理</div>-->
                <el-divider content-position="left">代数计算化简/几何转化处理</el-divider>
                <div class="item2" v-for="innerCalculate in inner.calculateMap.label">
                  <div>{{ innerCalculate.name }}
                    <i
                      class="el-icon-check"
                      v-if="
                          innerCalculate.isNo == 'yes'
                        "
                    ></i>
                    <i v-else class="el-icon-close"></i>

                  </div>

                </div>
              </div>
              <!--              代数计算化简-->
              <!--              思路预判与条件翻译-->
              <div class="item1" v-if="inner.calculateMap">
                <!--                <div class="innerTitle">思路预判与条件翻译</div>-->
                <el-divider content-position="left">思路预判与条件翻译</el-divider>
                <div class="item2" v-for="innerCalculate in inner.conditionMap.label">
                  <div>{{ innerCalculate.name }}
                    <i
                      class="el-icon-check"
                      v-if="
                          innerCalculate.isNo == 'yes'
                        "
                    ></i>
                    <i v-else class="el-icon-close"></i>
                  </div>

                </div>
              </div>
              <!--              思路预判与条件翻译-->
              <!--              题型辨识-->
              <div class="item1" v-if="inner.calculateMap">
                <el-divider content-position="left">题型辨识</el-divider>
                <div class="item2" v-for="innerCalculate in inner.questionTypesMap.label">
                  <div>{{ innerCalculate.name }}
                    <i
                      class="el-icon-check"
                      v-if="
                          innerCalculate.isNo == 'yes'
                        "
                    ></i>
                    <i v-else class="el-icon-close"></i>
                  </div>

                </div>
              </div>
              <!--              题型辨识-->


            </div>

            <!-- 标签正确率 -->
            <div v-for="bottomLabel in labelOrder.information" class="labelSum">
              <div>{{ bottomLabel.key }}</div>
              <div>
                <div>
                  <span>出现次数:</span>
                  <span>{{ bottomLabel.sum }}</span>
                </div>
                <div>
                  <span>正确率:</span>
                  <span style="color:green;">{{ bottomLabel.exactNumber }}</span>
                </div>
                <div>
                  <span>错误率:</span>
                  <span style="color: red">{{ bottomLabel.errorNumber }}</span>
                </div>
              </div>


            </div>



        </div>
        <!-- 每个周期 -->

      </div>
    </div>

    <van-popup v-model="show">
      <div class="formPopup">
        <van-form validate-first label-width="80px">
          <van-field name="radio" label="查询方式">
            <template #input>
              <van-radio-group
                v-model="queryParams.type"
                direction="horizontal"
              >
                <van-radio name="1">按天数</van-radio>
                <van-radio name="2">按次数</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field name="radio" label="查询学生" v-if="identity">
            <template #input>
              <el-select
                v-model="queryParams.userId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </template>
          </van-field>

          <van-field
            label="查询周期(天)"
            v-if="queryParams.type == 1"
            type="number"
            :disabled="queryParams.type == null"
            placeholder="请输入"
            v-model="queryParams.period"
          >
            <template #extra>
              <div>天</div>
            </template>
          </van-field>
          <van-field
            label="查询周期(次)"
            v-if="queryParams.type == 2"
            :disabled="queryParams.type == null"
            type="number"
            placeholder="请输入"
            v-model="queryParams.frequency"
          >
            <template #extra>次</template>
          </van-field>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 15px;
            "
          >
            <van-button type="primary" size="small" @click="getTableList"
            >查询
            </van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {getPersonalReportsList} from "@/api/studentEnd/analysisOfTheStudents";
import {listUser} from "@/api/system/user";
import {mapGetters} from "vuex";
// import echartPc from "../components/echartPc.vue";
export default {
  data() {
    return {
      show: true,
      queryParams: {
        type: null,
        userId: null,
        frequency: null,
        period: null,
      },
      tableList: [],
      userList: [],
      keyIsZk: {},
    };
  },
  computed: {
    ...mapGetters(["screenSize", "rolesId", "userId","typeScreen"]),
    identity: function () {
      return !this.rolesId.includes(102);
    },
  },
  mounted() {
    if (this.identity) {
      this.getUserList();
    } else {
    }
  },
  methods: {
    getTableList() {


      if (this.queryParams.type == 1) {
        if (this.queryParams.frequency) {
          delete this.queryParams.frequency;
        }
      }
      if (this.queryParams.type == 2) {
        if (this.queryParams.period) {
          delete this.queryParams.period;
        }
      }
      if (this.identity) {
      } else {
        this.queryParams.userId = this.userId;
      }

      let load = this.Loading.service({customClass: 'fVant'});

      getPersonalReportsList(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.data;
          this.show = false;
          load.close()
        }
      });
    },
    getUserList() {
      let obj = {
        pageSize: 999,
        pageNum: 1,
      };
      listUser(obj).then((res) => {
        if (res.code == 200) {
          this.userList = res.rows;
        }
      });
    },

    //调整时间显示
    setTime(time) {
      // 确保传入的参数是 Date 对象
      if (!(time instanceof Date)) {
        time = new Date(time);
      }

      // 获取年、月、日、时、分、秒
      let year = time.getFullYear();
      let month = time.getMonth() + 1; // 月份是从 0 开始的，所以要加 1
      let day = time.getDate();
      let hours = time.getHours();
      let minutes = time.getMinutes();
      let seconds = time.getSeconds();

      // 格式化月份、日期、小时、分钟和秒，确保它们都是两位数
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      // 组合成所需的格式
      let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDate;
    },
    setClass(val) {
      const groupedData = val.reduce((groups, item) => {
        if (!groups[item.key.split("/")[0]]) {
          groups[item.key.split("/")[0]] = [];
        }
        groups[item.key.split("/")[0]].push(item);
        return groups;
      }, {});

      function deleteKey(test) {
        let arr = JSON.parse(JSON.stringify(test));
        arr.forEach((ele) => {
          let itemArr = ele.key.split("/");
          itemArr.splice(0, 1);
          ele.key = itemArr.join("/");
        });
        return arr;
      }

      let arr = [];
      let key = Object.keys(groupedData);
      key.forEach((ele, index) => {
        let abc = this.generateRandomSixDigitNumber();
        let obj = {
          key: key[index],
          info: deleteKey(groupedData[ele]),
          isClass: abc,
        };
        console.log(abc, "abc");
        // this.$set(this.keyIsZk,abc,false)
        this.keyIsZk[abc] = false;
        console.log(ele, "ele", groupedData[ele]);
        arr.push(obj);
      });
      console.log(arr, "index");

      return arr;
    },
    //生成随机数
    generateRandomSixDigitNumber() {
      if (crypto && crypto.getRandomValues) {
        // 创建一个Uint32Array数组，用于存储生成的随机数
        const array = new Uint32Array(1);
        // 使用crypto.getRandomValues填充数组
        crypto.getRandomValues(array);
        // 将生成的随机数转换为介于0和1之间的浮点数
        const random = array[0] / (0xffffffff + 1);
        // 将浮点数乘以1000000（因为我们需要一个6位数），然后取整
        const sixDigitNumber = Math.floor(random * 1000000);
        return sixDigitNumber.toString().padStart(6, "0"); // 确保数字总是6位，前面用0填充
      } else {
        // 如果crypto不可用，则使用Math.random作为回退方案
        return Math.floor(Math.random() * 900000 + 100000)
          .toString()
          .padStart(6, "0");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mobelIndex {
  height: 100%;

  .formPopup {
    // height: 400px;
    width: 80vw;
    padding: 20px 0;
  }
}

div {
  font-size: 12px;
}

.tableItem {
  min-height: 150px;
  background-color: white;

  border-radius: 10px;
  margin-bottom: 15px;
  padding: 10px;

  > .title {
    font-size: 20px;
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .item {
    // background-color: red;
    margin-bottom: 20px;

    .el-collapse {
      border: 0;
    }

    .item1 {
      margin-bottom: 15px;

      ::v-deep .el-collapse-item__header {
        border-bottom: none;
      }

      ::v-deep .item2 {
        margin-bottom: 15px;
        line-height: 20px;

        > div {
          margin: 5px 0;

          > span:nth-of-type(1) {
            color: green;
          }

          > span:nth-of-type(2) {
            padding: 0 8px;
          }

          > span:nth-of-type(3) {
            color: red;
          }

          > span:nth-of-type(4) {
            // color: red;
            padding: 0 8px;
          }
        }
      }
    }
  }
}

.elDialogParams {
  //   height: 500px;
  //   width: 200px;
  min-height: max-content;
  background-color: white;
}

/* 隐藏Element UI输入框类型为number时的上下箭头 */
::v-deep .el-input__inner[type="number"]::-webkit-inner-spin-button,
.el-input__inner[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.questImg {
  width: 100%;
  height: 100px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.innerTitle {
  font-size: 14px;
  color: #707070;
}

::v-deep .el-icon-check {
  color: green;
  font-size: 20px;
}

::v-deep .el-icon-close {
  color: red;
  font-size: 20px;
}


.DateTitle {
  font-size: 16px;
  color: #707070;
  font-weight: bold;
}


.labelSum {

  > div:nth-of-type(2) {
    display: flex;
    margin: 10px 0 20px;

    > div {
      width: 115px;


    }
  }

}
</style>
